<template>
<div class="bottom">
    <router-link
    tag="div"   
    v-for="(item, index) in links" 
    :to="item.path"
    :key="index"
    >
    <mt-badge v-if="item.name==='cart'&&amount>=1&&amount<=99" type="error" size="small" class="cart">{{zong}}</mt-badge>
    <mt-badge v-else-if="item.name==='cart'&&amount>99" type="error" size="small" class="cart">99+</mt-badge>
    <span v-html="item.icon" class="icon"></span><span class="title">{{item.title}}</span></router-link>
</div>
</template>

<script>
import routes from '../page'
import {mapState,mapGetters} from 'vuex'
export default {
  name: 'bottom',
  data () {
    return {
       links: routes.filter(route => route.nav===true)}
  },
  computed:{
    ...mapState(['cartlist','amount']),
    ...mapGetters(['zong'])
    }
  }
</script>

<style scoped lang='scss'>
@font-face {
  font-family: 'iconfont';  /* project id 931805 */
  src: url('//at.alicdn.com/t/font_931805_9ntvxgcv96i.eot');
  src: url('//at.alicdn.com/t/font_931805_9ntvxgcv96i.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_931805_9ntvxgcv96i.woff') format('woff'),
  url('//at.alicdn.com/t/font_931805_9ntvxgcv96i.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_931805_9ntvxgcv96i.svg#iconfont') format('svg');
}
.bottom{display: flex;color:#b0b0b0; justify-content: space-around;border-top: 1px solid black;.icon{line-height: 30px; font-family: 'iconfont';display: block;font-size: 25px}}
.router-link-exact-active,.router-link-active{color: #424242 !important}
.title{line-height: 10px;display: block;margin-top: 5px;font-size: 12px}
.cart{position: absolute;font-size: 12px;line-height: 12px}
</style>
